<template>
  <div class="formComponents">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>表单通用组件</span>
      </div>
      <el-row :gutter="16">
        <el-col :lg="12" :sm="24">
          <div class="title sm">常用</div>
          <el-button-group class="btn" v-for="(btn, i) in defaultBtn" :key="i" size="small">
            <el-button v-if="btn.gid" @click="remove(btn)" size="small">
              <i class="el-icon-delete-solid" />
            </el-button>
            <el-button @click="addFormItem(btn)"size="small">{{btn.show_name}}</el-button>
          </el-button-group>
        </el-col>
        <el-col :lg="12" :sm="24">
          <div class="title sm">自定义</div>
          <el-button
            class="btn"
            size="small"
            v-for="(c_btn, index) in customBtn"
            :key="index"
            @click="addFormItem(c_btn.attr)"
          >{{c_btn.name}}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    defaultBtn: Array
  },
  data() {
    return {
      customBtn: [
        { name: "单行文本", attr: { required: 2, type: 1, show_name: "" } },
        { name: "多行文本", attr: { required: 2, type: 2, show_name: "" } },
        {
          name: "单选",
          attr: {
            required: 2,
            type: 3,
            show_name: "",
            options: [{ value: "选项1" }]
          }
        },
        {
          name: "多选",
          attr: {
            required: 2,
            type: 4,
            show_name: "",
            options: [{ value: "选项1" }]
          }
        },
        { name: "上传文件", attr: { required: 2, type: 5 } },
        {
          name: "日期选择",
          attr: {
            show_name: "",
            required: 2,
            type: 7,
            options: ["", ""]
          }
        },
        {
          name: "省市区选择",
          attr: {
            show_name: "",
            required: 2,
            type: 8
          }
        },
        {
          name: "多级下拉菜单",
          attr: {
            show_name: "",
            required: 2,
            type: 9
          }
        }
      ]
    };
  },
  methods: {
    remove(btn) {
      this.$emit("RemoveButton", btn);
    },
    addFormItem(btn) {
      btn = Object.assign({}, btn);
      btn = JSON.parse(JSON.stringify(btn));
      this.item.formConfig = btn;
      btn.disabled = false;
      this.item.attrs.push(btn);
    }
  }
};
</script>

<style lang="less" scoped>
.btn {
    margin: 4px;
  }
.box {
  .btn {
    margin: 4px;
  }
}
</style>